<section id="guide">
  <h1>Guide</h1>
  <h2 id="guide_exec">OpenWAX 실행</h2>
  <p>접근성 진단을 원하는 사이트에 접속 후 툴바에서 OpenWAX 아이콘을 클릭하여 OpenWAX를 실행합니다. 간단하죠?</p>
  <figure>
    <img alt="" src="i/guide/0.png" />
    <figcaption>Google Chrome에서 실행하려면</figcaption>
  </figure>
  <figure>
    <img alt="" src="i/guide/0-1.png" />
    <figcaption>Firefox에서 실행하려면</figcaption>
  </figure>
  <figure>
    <img alt="" src="i/guide/0-4.png" />
    <figcaption>북마클릿으로 실행하려면 (1. 북마클릿 링크를 북마크에 추가한 후, 2. 원하는 페이지에서 북마크 실행!)</figcaption>
  </figure>
  <h2 id="guide_score">WAX Score</h2>
  <p>OpenWAX가 제공하는 접근성 점수입니다. WAX Score는 기계적으로 검사할 수 있는 접근성 관련 항목들을 100점 만점으로 수치화하여 표시합니다.</p>
  <figure>
    <img alt="" src="i/guide/score100.png" />
    <figcaption>WAX Score: 100과 같이 OpenWAX 검사결과 상단에 WAX Score가 표시됩니다.</figcaption>
  </figure>
  <p>WAX Score가 100점이라고 정말로 접근성을 100%로 지킨건 아니라는 건 알고계시죠? 바보 이미지에 "천재"라고 대체
    텍스트를 달아도 기계적으로는 대체 텍스트를 일단 달았으니 접근성을 준수한 것으로 판단하니까요. 물론 대체 텍스트를
    달았다는 것 자체가 접근성을 준수했을 가능성이 높으므로 WAX Score는 충분히 의미를 가진답니다.</p>
  <p>아래는 WAX Score의 점수 구성에 대한 설명입니다.</p>
  <ul>
    <li><b>대체 텍스트(30점)</b>: 전체 이미지 대비 대체 텍스트가 제공된 이미지를 10점 만점으로 환산합니다. 이미지가 사용되지
    않았다면 30점입니다.</li>
    <li><b>키보드 포커스(10점)</b>: <code>onfocus</code> 이벤트에 <code>blur()</code> 함수를 실행하여 키보드 포커스를 없애는 경우, CSS의
      <code>outline</code> 속성이 0으로 설정된 경우가 있으면 0점, 그런 경우가 없으면 10점입니다.</li>
    <li><b>프레임 제목(10점)</b>: 페이지에 프레임이 제공되었다면 프레임에 제목(<code>title</code> 속성)이 제공된 비율을 10점
      만점으로 환산합니다. 프레임이 제공되지 않았다면 10점입니다.</li>
    <li><b>링크 텍스트(10점)</b>: 전체 링크 대비 링크 텍스트가 제공된 링크를 10점 만점으로 환산합니다. 링크가 사용되지
      않았다면 10점입니다.</li>
    <li><b>기본 언어(10점)</b>: 페이지에 기본 언어가 명시되었는지를 점수로 환산합니다. 프레임을 포함하여 검사하는 경우 기본
      언어가 명시된 비율로 점수가 계산됩니다.</li>
    <li><b>의도하지 않은 실행(10점)</b>: <code>onclick</code> 이벤트에 <code>window.open</code>이 포함된 경우 새 창 알림(<code>title</code> 속성,
      <code>target="_blank"</code>)이 제공된 비율을 10점 만점으로 환산합니다. <code>window.open</code>이 포함된
      <code>onclick</code> 이벤트가 없다면 10점입니다.</li>
    <li><b>레이블(20점)</b>: 전체 폼 서식 대비 레이블이 제공된 폼 서식의 비율을 20점 만점으로 환산합니다. 폼 서식이 사용되지
    않았다면 20점입니다.</li>
  </ul>
  <h2 id="guide_pages">대상 페이지</h2>
  <p>이제부터는 OpenWAX 실행결과에서 표시되는 항목들에 대한 설명입니다.</p>
  <p>대상 페이지는 OpenWAX가 검사를 수행한 페이지를 표시합니다. 페이지 안에 프레임이 들어있다면 OpenWAX의 옵션에 따라 대상 페이지가 될 수도, 그렇지 않을 수도 있습니다.</p>
  <h2 id="guide_exclude_pages">비대상 페이지</h2>
  <p>페이지 안에 들어있는 프레임 중에 대상 페이지가 되지 못한 페이지들입니다.</p>
  <p>Google Chrome에서는 현재 애석하게도 페이지와 도메인이 다른 프레임은 검사를 수행할 수 없습니다. 항상 비대상 페이지에 표시되죠.</p>
  <p>북마클릿에서는 당연하게도 Google Chrome처럼 페이지와 도메인이 다른 프레임은 검사를 수행할 수 없습니다. 왜 이런
    제약이 생기는지 알고싶으시면 <a href="http://en.wikipedia.org/wiki/Same_origin_policy">Same origin policy(동일
    출처 정책)</a>을 참고하세요.</p>
  <h2 id="guide_common">1~21번까지의 접근성 지표</h2>
  <p>1~21번까지의 접근성 지표에는 접근성 검사 수행 결과가 표시됩니다.</p>
  <p><img src="i/error.png" alt="X"> 표시 빨간 배경색(이하 오류항목)이 표시되는 항목은 대부분 접근성 오류입니다.</p>
  <figure>
    <img alt="" src="i/guide/0-2.png" />
    <figcaption>앗, 빨간 배경! 오류인가봐요.</figcaption>
  </figure>
  <p><img src="i/warning.png" alt="!"> 표시 노란 배경색(이하 의심항목)이 표시되는 항목은 접근성 오류가 의심되는 항목입니다.</p>
  <figure>
    <img alt="" src="i/guide/0-3.png" />
    <figcaption>음, 노란 배경! 오류인지 생각해봐야겠군요.</figcaption>
  </figure>
  <p>&quot;숨김&quot; 셀에는 CSS로 <code>display: none;</code> 선언되어 화면에 표시되지 않는 요소가 &quot;Hidden&quot;이라고 표시됩니다. 개발자가 자바스크립트 등을 이용하여 특정 동작을 수행할때만 화면에 표시하고 있는지도 모르죠.</p>
  <p>결과 항목에서 가끔 취소선이 그어진 텍스트를 보실 수가 있는데요. 이런 텍스트는 <code>display: none</code>이 부여되어 웹 페이지에서 존재하지 않도록 해놓은 텍스트에요. 이는 웹 브라우저는 물론이고 스크린리더 같은 보조기기에서도 대부분 접근이 불가능하니 참고하세요!</p>
  <p>항목을 한번 클릭해보실래요? 당신이 Google Chrome이나 북마클릿을 사용한다면 그 항목에 해당하는 요소에 초점을 맞춰줄거에요. 브라우저의 개발자 도구의 콘솔창을 활성화하신 상태라면 요소의 위치를 콘솔창에 표시합니다.</p>
  <p>당신이 Firefox를 사용한다면 Firebug를 설치하신 후에 항목을 클릭해보세요. 그 항목에 해당하는 요소에 초점을 맞춰줌과 동시에 Firebug의 요소 검사 기능을 수행하여 Firebug 창에 표시해줄거에요. 아주 유용하다고 자부할만한 기능이에요. Firebug와 함께라면 숨어있는 요소의 위치도 쉽게 파악할 수 있답니다.</p>
  <figure>
    <img alt="" src="i/guide/0-5.png" />
    <figcaption>OpenWAX + Firebug라면? 우와!</figcaption>
  </figure>

  <h2 id="guide_alt_img">1. 적절한 대체 텍스트 (img)</h2>
  <p><code>&lt;img&gt;</code>, <code>&lt;area&gt;</code>, <code>&lt;input type=&quot;image&quot;&gt;</code> 요소의 <code>alt</code> 속성을 표시합니다. <code>alt</code> 속성이 빈 값으로 선언된 경우에는 내용을 <code>alt=""</code>으로, <code>alt</code> 속성이 빠진 경우에는 내용을 <code>alt 미정의</code>로 표시합니다.</p>
  <h2 id="guide_alt_bg">1. 적절한 대체 텍스트 (bg)</h2>
  <p>CSS Background image가 지정된 요소의 텍스트 콘텐츠를 표시합니다. 이 지표에서는 의미를 갖고 있는 배경 이미지를 찾아서 그 의미가 텍스트 콘텐츠로도 제공되고 있는지를 확인하면 됩니다. 텍스트 콘텐츠가 근처의 요소에 제공되고 있을지도 모르니 오류라고 생각하기 전에 잘 찾아보시는 게 좋아요. 의미없는 이미지는 그냥 지나치세요!</p>
  <h2 id="guide_alt_object">1. 적절한 대체 텍스트 (object)</h2>
  <p>이 지표에서는 페이지에 사용된 <code>&lt;object&gt;</code>, <code>&lt;embed&gt;</code>, <code>&lt;video&gt;</code>, <code>&lt;audio&gt;</code>, <code>&lt;canvas&gt;</code>, <code>&lt;svg&gt;</code> 요소를 표시합니다. 그냥 표시만 할뿐이니 표시된 요소의 대체 콘텐츠가 잘 제공되었는지, 키보드로는 잘 작동하는지 살펴보세요.</p>
  <h2 id="guide_contrast">5. 텍스트 콘텐츠의 명도 대비</h2>
  <p>전경색과 배경색을 선택하면 명도 대비를 표시해주는 지표입니다. 전경색과 배경색에 따라 결과란에 명도 대비값이 표시됩니다.</p>
  <p>Google Chrome용 명도 대비 도구는 페이지를 100%보다 크게 혹은 작게 확대 혹은 축소 했을 경우 색 선택이 원하는대로 잘 되지 않는 문제가 있어요. 빨리 해결하고 싶은 문제에요. 이 문제를 해결하여 github에 pull request를 해주신다면 제가 커피라도 대접해드릴게요!</p>
  <p>북마클릿에서는 작동하지 않습니다. ㅠㅠ</p>
  <h2 id="guide_focus">8. 초점 이동</h2>
  <p>이 지표에서는 키보드 초점이 표시되지 않는 형태로 제작된 코드를 일부 찾아줍니다. <code>blur()</code> 함수를 호출하여 초점을 사라지게 만든 경우라든지, CSS의 <code>outline</code> 속성을 0으로 설정한 경우에 해당됩니다.</p>
  <p>이 지표는 확실히 문제가 있는 경우만 진단하니 별 문제가 나오지 않았더라도 페이지에 초점 이동 문제가 있을 가능성은 남아있어요.</p>
  <h2 id="guide_skip_nav">12. 건너뛰기 링크</h2>
  <p>페이지에 사용된 최초 10개의 해시 링크를 표시합니다. 건너뛰기 링크가 여러개 제공될 수 있으니 넉넉하게 10개를 표시하는거에요. 여기서는 첫 항목부터 건너뛰기 링크가 나오는지, 건너뛰기 링크가 1번째 링크부터 시작하는지 확인하시면 되요. 건너뛰기 링크는 페이지의 시작점에 있어야 하니 1번째 링크여야 하니까요.</p>
  <p>건너뛰기 링크가 제대로 제공된 것 같다면 그 다음엔 키보드로도 초점이 가는지 직접 페이지에 테스트를 해보시면 끝나겠죠?</p>
  <h2 id="guide_title">13. 제목 제공(&lt;title&gt;)</h2>
  <p>모든 대상 페이지에 사용된 제목(<code>&lt;title&gt;</code>)을 표시합니다.</p>
  <p>제목이 제공되지 않았거나 특수문자가 반복된 경우 오류항목으로 표시됩니다.</p>
  <h2 id="guide_frame_title">13. 제목 제공(frame)</h2>
  <p>대상 페이지에 포함된 모든 프레임(<code>&lt;frame&gt;</code>, <code>&lt;iframe&gt;</code>)의 title 속성을 표시합니다.</p>
  <p>프레임 제목이 제공되지 않은 경우 오류항목으로 표시됩니다.</p>
  <h2 id="guide_heading">13. 제목 제공(&lt;h1&gt;~&lt;h6&gt;)</h2>
  <p>모든 대상 페이지에 사용된 헤딩 태그(<code>&lt;h1&gt;</code> ~ <code>&lt;h6&gt;</code>)를 표시합니다.</p>
  <h2 id="guide_linktexts">14. 적절한 링크 텍스트</h2>
  <p><code>&lt;a&gt;</code>, <code>&lt;area&gt;</code> 요소의 텍스트를 표시합니다.</p>
  <h2 id="guide_lang">15. 기본 언어 표시</h2>
  <p>모든 대상 페이지의 <code>&lt;html&gt;</code> 태그에 선언된 <code>lang</code>, <code>xml:lang</code> 속성을
    표시합니다. <code>lang</code>, <code>xml:lang</code>이 선언되어 있지 않으면 오류항목으로 표시됩니다.</p> 
  <p>HTML 계열의 Doctype 페이지는 <code>lang</code> 속성이 없으면 오류항목으로 표시됩니다.</p>
  <p>XHTML 1.0 Transitional Doctype 페이지는 <code>lang</code> 속성만 있고 <code>xml:lang</code> 속성이 없는 경우와
    그 반대의 경우 의심항목으로 표시됩니다.</p>
  <p>그 외의 XHTML Doctype 페이지는 <code>xml:lang</code> 속성이 없으면 오류항목으로 표시됩니다.</p>
  <h2 id="guide_demand">16. 사용자 요구에 따른 실행</h2>
  <p>이 지표에서는 onclick 이벤트 핸들러 자바스크립트 코드에 <code>window.open</code>이 포함된 경우 및 onchange
    이벤트 핸들러가 선언된 요소를 표시합니다.</p>
  <p>이 지표에서 표시되는 항목들은 사용자 요구에 따른 실행 지표의 오류가 발생될 수 있는 일부 항목을 표시합니다. 우선
    표시되는 항목 중에 오류가 있는지 보시고, 오류가 발견되지 않았다면 여기서 표시되지 않은 콘텐츠 중 오류가 있지는
    않은지 추가적으로 점검해야 합니다.</p>
  <h2 id="guide_thead_tfoot">18. 표의 구성(caption, summary)</h2>
  <p><code>&lt;table&gt;</code> 요소의 <code>&lt;caption&gt;</code>과 <code>summary</code>가 표시됩니다.</p>
  <p><code>&lt;caption&gt;</code>이 제공되었으나 제목 셀(<code>&lt;th&gt;</code>)이 하나도 없으면 오류로 표시됩니다.
    제목 셀이 필요없는 테이블은 배치용 테이블이니 <code>&lt;caption&gt;</code>을 제공하지 않아야 합니다.</p>
  <p>반대로 제목 셀(<code>&lt;th&gt;</code>)이 제공되었음에도 <code>&lt;caption&gt;</code>이 제공되지 않은 경우에도 오류로 표시됩니다.</p>
  <p>배치용 테이블은 의심항목으로 표시됩니다. 배치용 테이블은 지양하자는 의미를 담고있죠.</p>
  <h2 id="guide_th">18. 표의 구성(th)</h2>
  <p><a href="#guide_thead_tfoot">18. 표의 구성(caption, summary)</a>과 같은 조건으로 오류 및 의심항목을 표시합니다.</p>
  <p>추가로, <code>scope</code> 속성이 부여되지 않은 <code>&lt;th&gt;</code>가 존재하는 경우도 의심항목으로 표시합니다.</p>
  <h2 id="guide_label">19. 레이블 제공</h2>
  <p>레이블이 필요한 모든 입력 서식과 연결된 <code>&lt;label&gt;</code>과 <code>title</code> 속성을 표시합니다.</p>
  <p><code>&lt;label&gt;</code>이 모두 제공되지 않았다면 오류항목으로, <code>title</code> 속성만 제공되었다면
    의심항목으로 표시됩니다.</p>
  <p>표시되는 입력 서식은 <code>&lt;input type=&quot;hidden&quot;&gt;</code>, <code>&lt;input
    type=&quot;submit&quot;&gt;</code>, <code>&lt;input type=&quot;reset&quot;&gt;</code>, <code>&lt;input
    type=&quot;button&quot;&gt;</code>, <code>&lt;input type=&quot;image&quot;&gt;</code>을 제외한 모든
    <code>&lt;input&gt;</code> 및 <code>&lt;textarea&gt;</code>,
    <code>&lt;select&gt;</code>입니다.</p>
  <h2 id="guide_validation">21. 마크업 오류 방지</h2>
  <p><a href="http://validator.w3.org/" target="_blank">W3C Validation Service</a>의 HTML 유효성 검사 결과 중 접근성
    오류를 일으킬 수 있는 항목들을 표시합니다.</p>
  <p>HTML 유효성 검사 결과에는 <a href="http://www.htmlhelp.com/tools/validator/problems.html" target="_blank">알려진
    문제</a>가 발생할 수 있으니 무조건 오류라고 판단하지 않아야 하니 주의하세요!</p>
  <p>OpenWAX가 HTML 유효성 검사 결과 중 접근성 오류를 일으킬 수 있는 항목으로 판단하는 목록은 다음과 같습니다.</p>
  <p>북마클릿에서는 작동하지 않습니다. ㅠㅠ</p>
  <ul lang="en">
    <li>document type does not allow element * here; missing one of * start-tag.</li>
    <li>end tag for * which is not finished*</li>
    <li>end tag for element * which is not open*</li>
    <li>ID * already defined.</li>
    <li>unclosed start-tag requires SHORTTAG YES *</li>
    <li>unclosed end-tag requires SHORTTAG YES *</li>
    <li>empty start-tag *</li>
    <li>empty end-tag *</li>
  </ul>
  <h2 id="guide_license">License</h2>
  <p>OpenWAX is on <a href="http://opensource.org/licenses/MIT">MIT license</a>.</p>
</section>
